8b:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"ExplicitChatIdProvider"] 8c:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"SWRDataProvider"] 8d:T3c6a,[V0_FILE]typescriptreact:file="components/medal-icon.tsx" isMerged="true" import { Trophy } from "lucide-react" interface MedalIconProps { position: number } export function MedalIcon({ position }: MedalIconProps) { if (position > 3) return null const colors = { 1: "text-yellow-400", 2: "text-slate-400", 3: "text-amber-700", } return } [V0_FILE]typescriptreact:file="components/performance-indicator.tsx" isMerged="true" interface PerformanceIndicatorProps { previousPosition: number currentPosition: number } export function PerformanceIndicator({ previousPosition, currentPosition }: PerformanceIndicatorProps) { if (previousPosition === currentPosition) return null const isImproved = currentPosition < previousPosition return (

{isImproved ? "▲" : "▼"} {Math.abs(previousPosition - currentPosition)}

) } [V0_FILE]typescriptreact:file="components/stat-badge.tsx" isMerged="true" interface StatBadgeProps { label: string value: string | number } export function StatBadge({ label, value }: StatBadgeProps) { return (

{label} {value}

) } [V0_FILE]typescriptreact:file="race-leaderboard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Trophy, Timer, Activity } from "lucide-react" interface Player { position: number previousPosition: number username: string avatar: string time: string bestLap: string first: number second: number third: number totalRaces: number winRate: number sector1: number sector2: number sector3: number isLive?: boolean } const players: Player[] = [ { position: 1, previousPosition: 1, username: "Username 1", avatar: "/placeholder.svg?height=32&width=32", time: "0:55.510", bestLap: "0:54.321", first: 1, second: 1, third: 1, totalRaces: 156, winRate: 42, sector1: 100, sector2: 98, sector3: 99, isLive: true, }, { position: 2, previousPosition: 2, username: "Username 2", avatar: "/placeholder.svg?height=32&width=32", time: "1:15.430", bestLap: "1:14.321", first: 0, second: 0, third: 0, totalRaces: 120, winRate: 20, sector1: 95, sector2: 92, sector3: 90, isLive: false, }, { position: 3, previousPosition: 3, username: "Username 3", avatar: "/placeholder.svg?height=32&width=32", time: "1:21.430", bestLap: "1:20.123", first: 0, second: 0, third: 0, totalRaces: 80, winRate: 10, sector1: 90, sector2: 88, sector3: 92, isLive: false, }, { position: 4, previousPosition: 4, username: "Username 4", avatar: "/placeholder.svg?height=32&width=32", time: "1:32.213", bestLap: "1:31.001", first: 0, second: 0, third: 1, totalRaces: 50, winRate: 5, sector1: 85, sector2: 80, sector3: 88, isLive: false, }, { position: 5, previousPosition: 5, username: "Username 5", avatar: "/placeholder.svg?height=32&width=32", time: "1:44.594", bestLap: "1:43.987", first: 0, second: 0, third: 0, totalRaces: 30, winRate: 3, sector1: 80, sector2: 78, sector3: 85, isLive: false, }, { position: 6, previousPosition: 6, username: "Username 6", avatar: "/placeholder.svg?height=32&width=32", time: "1:45.013", bestLap: "1:44.555", first: 0, second: 0, third: 0, totalRaces: 20, winRate: 2, sector1: 75, sector2: 70, sector3: 80, isLive: false, }, { position: 7, previousPosition: 7, username: "Username 7", avatar: "/placeholder.svg?height=32&width=32", time: "1:48.916", bestLap: "1:47.888", first: 0, second: 0, third: 0, totalRaces: 10, winRate: 1, sector1: 70, sector2: 68, sector3: 75, isLive: false, }, { position: 8, previousPosition: 8, username: "Username 8", avatar: "/placeholder.svg?height=32&width=32", time: "1:56.355", bestLap: "1:55.222", first: 0, second: 0, third: 0, totalRaces: 5, winRate: 0, sector1: 65, sector2: 60, sector3: 70, isLive: false, }, { position: 9, previousPosition: 9, username: "Username 9", avatar: "/placeholder.svg?height=32&width=32", time: "2:05.515", bestLap: "2:04.111", first: 0, second: 0, third: 0, totalRaces: 2, winRate: 0, sector1: 60, sector2: 58, sector3: 65, isLive: false, }, { position: 10, previousPosition: 10, username: "Username 10", avatar: "/placeholder.svg?height=32&width=32", time: "2:08.375", bestLap: "2:07.000", first: 0, second: 0, third: 0, totalRaces: 1, winRate: 0, sector1: 55, sector2: 50, sector3: 60, isLive: false, }, ] function MedalIcon({ position }: { position: number }) { if (position > 3) return null const colors = { 1: "text-yellow-400", 2: "text-slate-400", 3: "text-amber-700", } return } function PerformanceIndicator({ previousPosition, currentPosition, }: { previousPosition: number; currentPosition: number }) { if (previousPosition === currentPosition) return null const isImproved = currentPosition < previousPosition return (

{isImproved ? "▲" : "▼"} {Math.abs(previousPosition - currentPosition)}

) } function StatBadge({ label, value }: { label: string; value: string | number }) { return (

{label} {value}

) } export default function RaceLeaderboard() { const [selectedPlayer, setSelectedPlayer] = useState(null) const [isLive, setIsLive] = useState(true) useEffect(() => { const interval = setInterval(() => { setIsLive((prev) => !prev) }, 2000) return () => clearInterval(interval) }, []) return (

RACE RESULTS

{isLive && (

LIVE

)}

{players.map((player) => ( setSelectedPlayer(player)} > ))}

POS	PLAYER	TIME	SECTORS	STATS
{player.position}	{player.isLive && ( )} {player.username} Best: {player.bestLap}	{player.time}	{[player.sector1, player.sector2, player.sector3].map((sector, i) => ( ))}	{player.first} {player.winRate}% {player.totalRaces}

{selectedPlayer && (

{selectedPlayer.username}

Race Statistics

)}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { extend: { keyframes: { pulse: { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 }, }, }, animation: { pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } 84:["$","$L8b",null,{"chatId":"Qd4NuWxh3Tl","children":["$","$L8c",null,{"data":{"@\"active-block\",\"Qd4NuWxh3Tl\",":{"id":"b_IUi1G9pip58","messageId":"loz7QQi9ywiZMUHGxzkAdD99fA9gYiDT","source":"$8d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"race-leaderboard","type":"code-project","project":"race-leaderboard"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Qd4NuWxh3Tl\",":false,"":null},"children":"$L8e"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This